﻿
@{
   
}

<div class="row" id="addrow" v-show="isShow" style="display: none">
    <div class="panel panel-primary">
        <div class="panel-heading">
            <h3 class="panel-title">分类详情</h3>
        </div>
        <form id="f1" class="form-inline panel-body">
            <div class="form-group">
                <label class="control-label" for="title">标题</label>
                <input type="hidden"  v-model="category.id"/>
                <input type="text" id="title" name="title" v-model="category.title" class="form-control"/>
            </div>
    
        </form>
        <div class="panel-footer ">
            <input type="button" value="提交" class="btn btn-primary btn-sm" v-on:click="submit" />
            <input type="button" value="取消" class="btn btn-default  btn-sm" v-on:click="hide" />
        </div>
    </div>
</div>
<div class="row">
    <div>
        <form class="form-inline">
            <div class="form-group">
                <label class="control-label" for="stitle">名称</label>
                <input type="text" value="" id="stitle" class="form-control" />
            </div>
            <div class="form-group">
                <button type="button" class="btn btn-primary">查询</button>
                <button type="button" class="btn btn-default" onclick="row.init();row.show();">新增</button>
            </div>
        </form>
    </div>
    <div id="grid">
        <table class="table table-striped table-bordered table-hover table-condensed">
            <caption>
                产品分类列表
            </caption>
            <thead>
            <tr>
                <th>编号</th>
                <!--<th>ParentId</th>-->
                <th>名称</th>
                <th>添加时间</th>
                <th>编辑</th>
            </tr>
            </thead>
            <tbody>
            <tr v-for="(r, index) in rows">
                <td>{{r.Id}}</td>
                <!--<td>{{r.ParentId}}</td>-->
                <td>{{r.Title}}</td>
                <td>{{r.CreateTime.substring(0,19).replace('T', ' ')}}</td>
                <td>
                    <a href="#" class="btn btn-sm btn-default" v-on:click='edit(index);'>编辑</a>
                </td>
            </tr>
            </tbody>
        </table>
        <div class="Page navigation">

        </div>
    </div>
</div>
<div class="row">
    
</div>

@section scripts
{
    <script src="/Scripts/smallcompent.js"></script>
    <script src="/Scripts/vue.min.js"></script>
    <script>
        //行
        var row = new Vue({
            el: "#addrow",
            data: {
                isShow: false,
                category: {
                    id: 0,
                    title: ''
                }
            },
            methods: {
                init: function() {
                    this.category.id = 0;
                    this.category.title = '';
                },
                submit: function() {
                    var cate = this.category;
                    var f1 = document.getElementById('f1');
                    if (formCheckValidity(f1)) {
                        $.ajax({
                            url: cate.id > 0 ? "/category/update" : "/category/add",
                            type: 'POST',
                            data: cate,
                            success: function(r) {
                                if (r.code === 0) {
                                    cate.id > 0 ? grid.search() : grid.refresh();
                                    row.hide();
                                }
                                requestFai(r);
                            },
                            error: function(r) {

                            }
                        });
                    }
                },
                show: function() {
                    this.isShow = true;
                },
                hide: function() {
                    this.isShow = false;
                    this.init();
                }
            }
        });

        //表格
        var grid = new Vue({
            el: "#grid",
            data: {
                isShow: false,
                limit: 15,
                page: 1,
                options: {},
                rows: {}
            },
            methods: {
                search: function() {
                    this.page = 1;
                    this.load();
                },
                load: function() {
                    this.options.page = this.page;
                    this.options.limit = this.limit;

                    var options = this.options;
                    $.ajax({
                        url: '/category/all',
                        data: options,
                        type: "GET",
                        success: function(r) {
                            if (r.code === 0) {
                                grid.isShow = true;
                                grid.rows = r.data.rows;
                                var count = r.data.count;
                                $(".Page").html(fnInitPage(count, options.limit, options.page));
                            }
                            requestFai(r);
                        },
                        error: function(r) {

                        }
                    });
                },
                edit: function(i) {
                    var r = this.rows[i];
                    row.category.id = r.Id;
                    row.category.title = r.Title;
                    row.show();
                },
                refresh: function() {
                    this.load();
                },
                next: function() {
                    this.page += 1;
                    this.load();
                },
                goto: function(p) {
                    this.page = p;
                    this.load();
                }
            }
        });

        $(function() {
            grid.search();
        });
    </script>
}
